<template>
  <div class="wfull">
    <TableComponent :columns="columns" :requestFn="fetchTableData">
      <template #handleOpt>
        <div class="mb10 wfull flex justify_end">
          <!-- 新增 -->
          <el-button type="primary" @click="handleAdd">{{ $t("new_add") }}</el-button>
        </div>
      </template>

      <template #operate="{row}">
        <div>
          <span class="pointer color_primary" @click="handleEdit(row)">{{ $t("edit") }}</span>
        </div>
      </template>
    </TableComponent>

    <DialogComponent
      :modelValue="dialogVisible"
      @update:modelValue="handleDialogVisibleUpdate"
      :key="dialogVisibleKey"
      :title="dialogTitle"
      :activeEvent="activeEvent"
    >
      <div>
        <el-form :model="dialogFormData" :rules="rules" ref="ruleFormRef">
          <!-- 当前跟进人 -->
          <el-form-item :label="$t('customerInfoMation_currentfollowUpAddPerson')">admin</el-form-item>
          <!-- 跟进内容 -->
          <el-form-item :label="$t('customerInfoMation_followUpContent')" prop="textarea">
            <el-input
              v-trim
              v-model="dialogFormData.textarea"
              :rows="10"
              type="textarea"
              :placeholder="$t('customerInfoMation_followUpContent_placeholder')"
            />
          </el-form-item>
        </el-form>
      </div>
    </DialogComponent>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch } from "vue";

import type { FormInstance, FormRules } from "element-plus";

import { validateChineseLength } from "../../../../util/util";
import {useI18n} from "vue-i18n"
import { TableItemDataType } from "../../../../viewModel/TableComponent/TableComponent";
export default defineComponent({
  setup() {
    const {t} = useI18n()

    // 表格设置、表格数据请求
    const columns = ref<TableItemDataType[]>([
      {
        label: t("customerInfoMation_followUpContent"), // 跟进内容
        prop: "followUpContent",
      },
      {
        label: t("customerInfoMation_followUpTime"), // 跟进时间
        prop: "followUpTime",
        width: "150"
      },
      {
        label: t("customerInfoMation_followUpAddPerson"), // 添加人
        prop: "followUpAddPerson",
        width: "150"
      },
      {
        label: t("operate"), // 操作
        prop: "operate",
        useSlot: true,
        width: "150"
      }
    ]);
    const fetchTableData = (params: any) => {
      console.log("请求参数：", params);
      return {
        code: 200,
        data: [],
      };
    };

    // 弹框的设置
    interface RuleForm {
      textarea: string;
    }
    const dialogFormData = ref<RuleForm>({
      textarea: "",
    });
    const ruleFormRef = ref<FormInstance>();
    const rules = reactive<FormRules<RuleForm>>({
      textarea: [
        { required: true, message: t("customerInfoMation_followUpContent_placeholder"), trigger: "blur" },
        {
          validator: function (rule: any, value: any, callback: any) {
            if (!value) {
              return callback(new Error(t("customerInfoMation_followUpContent_placeholder")));
            } else {
              if (!validateChineseLength(value, 500)) {
                return callback(new Error(t("customerInfoMation_followUpContent_maxLength")));
              } else {
                callback();
              }
            }
          },
          trigger: "blur",
        },
      ],
    });

    const dialogVisibleKey = ref(new Date().getTime());
    const dialogVisible = ref(false);
    const dialogTitle = ref("添加跟进记录");
    // 添加跟进记录的操作
    const activeEvent = () => {
      const formEl = ruleFormRef.value;
      return new Promise((resolve, reject) => {
        if (formEl) {
          formEl.validate((valid) => {
            if (valid) {
              console.log("提交数据：", dialogFormData.value);
              resolve(true);
            } else {
              reject(false);
            }
          });
        } else {
          reject(false);
        }
      });
    };

    // 更新弹框的状态
    const handleDialogVisibleUpdate = (newValue: boolean) => {
      dialogVisibleKey.value = new Date().getTime();
      dialogVisible.value = newValue;
    };
    const handleAdd = () => {
      dialogVisibleKey.value = new Date().getTime();
      dialogVisible.value = true;
    };

    // 编辑
    const handleEdit = (payload:any) => {
      dialogVisibleKey.value = new Date().getTime();
      dialogVisible.value = true;
      dialogFormData.value.textarea = payload.followUpContent
    }


    // 监听如果已经关闭，重置数据
    watch(dialogVisible, (newVal) => {
      if (!newVal) {
        dialogFormData.value.textarea = "";
      }
    });

    return {
      dialogVisibleKey,
      dialogVisible,
      dialogTitle,
      activeEvent,
      handleDialogVisibleUpdate,
      handleAdd,
      handleEdit,
      dialogFormData,
      ruleFormRef,
      rules,
      columns,
      fetchTableData
    };
  },
});
</script>

<style></style>
